<template>
  <div class="course-list-container">
    <div class="all-title">
      <span>全部内容（{{total}}）</span>
      <i class="icon-sort" :class="sortUp?'up':'down'" @click="changeSort"></i>
    </div>
    <div class="course-list" v-if="list.length>0">
      <van-list v-model="loading"
                :finished="finished"
                :error.sync="error"
                :immediate-check="false"
                error-text="请求失败，点击重新加载"
                finished-text=""
                @load="onLoad">
        <div v-for="(item, index) in list"
             :key="index"
             class="item" @click="linkToCourse(item)">
          <div class="item-img">
            <img :src="item.video_cover_url" alt="">
          </div>
          <div class="item-con">
            <div class="title" :class="item.is_last_broadcast?'red':''">{{item.title}}</div>
            <div class="bottom-con">
              <div class="num">
                <span>{{item.play_num}}次学习</span>
                <span class="play-progress" v-if="item.broadcast_val>0">已播{{item.broadcast_val}}%</span>
              </div>
              <van-button class="more-btn" plain hairline round v-if="item.is_free==1">免费试听</van-button>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { courseList } from '@/api/item/item'
import Vue from 'vue'
export default Vue.extend({
  props: {
    itemId: {
      type: [Number, String]
    }
  },
  data() {
    return {
      sortUp: true,
      list: [],
      loading: false,
      error: false,
      finished: false,
      total: '',
      listParams: {
        p: 1,
        item_id: '',
        sequence: 1
      }
    }
  },
  methods: {
    init() {
      this.listParams.p = 1
      this.error = false
      this.finished = false
      this.loading = false
      this.list = []
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)

      courseList(this.listParams).then(res => {
        this.loading = false
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.total = resData.total
          if (resData.list && resData.list.length > 0) {
            this.list = resData.list
            this.listParams.p++
            //小程序中自动加载下一页
              this.onLoad()
          } else {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    onLoad() {
      courseList(this.listParams).then(res => {
        this.loading = false
        if (res.status == 1) {
          const resData = res.data
          if (resData.list && resData.list.length > 0) {
            // this.list = resData.list
            this.list.push(...resData.list)
            this.listParams.p++
            //小程序中自动加载下一页
              this.onLoad()
          } else {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 切换课程排序
    changeSort() {
      this.sortUp = !this.sortUp
      if (!this.sortUp) {
        this.listParams.sequence = 2
      } else {
        this.listParams.sequence = 1
      }
      this.init()
    },
    linkToCourse(item) {
      this.$JumpName(this, 'itemCourse', { id: item.course_id, item_id: this.listParams.item_id })
    }
  },
  created() {
    this.listParams.item_id = this.itemId
    this.init()
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
.course-list-container{
  background:#fff;
  .all-title{
    display:flex;
    justify-content: space-between;
    padding:14px 24px 8px;
    font-size:28px;
    font-weight:bold;
    .icon-sort{
      width:28px;
      height:26px;
      background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/column_up.png") center no-repeat;
      background-size:100%;
      &.down{
        background-image:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/column_down.png");
      }
    }
  }
  .course-list{
    padding:0 24px 24px 24px;
  }
  .item{
    display:flex;
    padding:24px 0;
    border-top:2px solid #EEEEEE;
    &:first-child{
      border-top:0;
    }
    .item-img{
      overflow:hidden;
      width:200px;
      height:116px;
      border-radius: 6px;
      img{
        display:block;
        width:100%;
      }
    }
    .item-con{
      flex:1;
      display:flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left:20px;
      .title{
        font-weight:bold;
        @include lineClamp(26px,34px,2);
        &.red{
          color:#F30C23;
        }
      }
    }
    .bottom-con{
      display:flex;
      justify-content: space-between;
      align-items:center;
      .num{
        color:#999;
        .play-progress{
          margin-left:8px;
          padding:5px 14px;
          font-size:20px;
          border-radius:24px;
          color: #F30C23;
          background: #FFF0F1;
        }
      }
      .more-btn{
        height:42px;
        padding:0 20px;
        font-size:20px;
        border-color:#F21328;
        color:#F21328;
      }
    }
  }
}
</style>
